<script setup>
import { reactive, onMounted } from 'vue'

/* 
步骤分析：
1-加载完毕后  监听鼠标移动
2-执行鼠标移动回调函数
3-获取坐标
4-显示坐标
*/
/* 1 */
/* 2 回调函数*/
/* 定义数据 */
const useMouse = function () {
  const obj = reactive({
    x: 0,
    y: 0
  })
  const handle = (e) => {
    console.log(e.pageX, 99);
    obj.x = e.pageX
    obj.y = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', handle)
  })
  return obj
}

const obj = useMouse()

</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3
    <div>X:{{ obj.x }}</div>
    <div>Y:{{ obj.y }}</div>
  </div>
</template>
<style lang='less'  scoped>
</style>